<section class="super-xjh dark-bg">
  <nz-spin
    nzSimple
    *ngIf="serviceCommon.sliceMax === 0"
    class="position-center"
  />

  <header class="sheader dark-bg">
    <div class="headerbox">
      <div class="hitem">
        <img class="logo" [src]="serviceCommon.settings.favicon" />
        <span class="title dark-white">{{
          serviceCommon.settings.superTitle || serviceCommon.title
        }}</span>
      </div>

      <div class="topnav dark-scrollbar">
        <div
          *ngFor="
            let item of serviceCommon.websiteList.slice(
              0,
              serviceCommon.overIndex
            );
            index as i;
            trackBy: serviceCommon.trackByItem
          "
          (click)="serviceCommon.handleCilckTopNav(i)"
          [class.active]="serviceCommon.page === i"
          [class.dark-text-active]="serviceCommon.page === i"
          class="hitem over-item dark-text"
        >
          {{ item.title }}
        </div>
        <!-- More -->
        <app-web-more-menu
          *ngIf="serviceCommon.overIndex < serviceCommon.websiteList.length"
          [data]="
            serviceCommon.websiteList.slice(serviceCommon.overIndex, 99999)
          "
          [index]="serviceCommon.overIndex"
          [page]="serviceCommon.page"
          (onClick)="serviceCommon.handleCilckTopNav($event)"
          class="flex-center"
        />
      </div>
    </div>
  </header>

  <div class="main-box">
    <div
      class="left dark-bg dark-border-color dark-scrollbar"
      *ngIf="serviceCommon.websiteList[serviceCommon.page]"
    >
      <div
        class="bar-item dark-text dark-hover ellipsis"
        [class.active]="serviceCommon.id === i"
        [class.dark-item-active]="serviceCommon.id === i"
        (click)="serviceCommon.handleSidebarNav(i)"
        *ngFor="
          let item of serviceCommon.websiteList[serviceCommon.page].nav;
          index as i;
          trackBy: serviceCommon.trackByItem
        "
      >
        <img *ngIf="item.icon" class="sideicon" [src]="item.icon" />
        <span class="ellipsis">{{ item.title }}</span>
      </div>
    </div>

    <div
      class="middle dark-bg"
      [class.noads]="serviceCommon.settings.superImages.length <= 0"
    >
      <div class="search-t dark-border-color">
        <app-search-engine size="small"></app-search-engine>
        <div class="bar dark-scrollbar">
          <div
            class="bar-item"
            *ngFor="
              let item of serviceCommon.currentList;
              index as i;
              trackBy: serviceCommon.trackByItem
            "
            [class.active]="serviceCommon.selectedIndex === i"
            [class.none]="!item.title"
            (click)="serviceCommon.handleCheckThree(i)"
          >
            {{ item.title }}
          </div>
        </div>
      </div>

      <div
        *ngIf="
          serviceCommon.currentList[serviceCommon.selectedIndex]?.nav?.length;
          else noData
        "
      >
        <app-card
          *ngFor="
            let el of serviceCommon.currentList[serviceCommon.selectedIndex]
              .nav;
            index as j;
            trackBy: serviceCommon.trackByItemWeb
          "
          [indexs]="[
            serviceCommon.page,
            serviceCommon.id,
            serviceCommon.selectedIndex,
            j
          ]"
          [cardStyle]="serviceCommon.settings.superCardStyle"
          [dataSource]="el"
          [searchKeyword]="serviceCommon.searchKeyword"
        ></app-card>
      </div>
      <ng-template #noData>
        <app-no-data></app-no-data>
      </ng-template>

      <div
        class="apply"
        *ngIf="
          serviceCommon.currentList.length &&
          serviceCommon.currentList[0].title &&
          (serviceCommon.isLogin || serviceCommon.settings.allowCollect)
        "
      >
        <span class="appbtn" (click)="openCreateWebModal()">{{
          serviceCommon.isLogin ? $t('_add') : $t('_apply')
        }}</span>
      </div>
    </div>

    <div
      class="right dark-scrollbar"
      *ngIf="serviceCommon.settings.superImages.length > 0"
    >
      <div
        class="aditem"
        *ngFor="let item of serviceCommon.settings.superImages; index as i"
      >
        <a
          [href]="item['url'] || 'javascript:void(0)'"
          [target]="item['url'] ? '_blank' : '_self'"
        >
          <img class="adsimg" [src]="item['src']" />
        </a>
      </div>
    </div>
  </div>

  <app-footer [content]="serviceCommon.settings.superFooterHTML"></app-footer>

  <app-fixbar [showCollapse]="false"> </app-fixbar>
</section>
